<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>手机定位测试</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        margin: 0;
        padding: 16px;
      }
      .card {
        border: 1px solid #ebeef5;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
      }
      .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .meta {
        color: #606266;
        font-size: 13px;
        margin-bottom: 12px;
      }
      .result {
        margin-top: 12px;
        padding: 12px;
        border-radius: 6px;
      }
      .ok {
        background: #f0f9eb;
        color: #67c23a;
      }
      .warn {
        background: #fef0f0;
        color: #f56c6c;
      }
      .btn {
        display: inline-block;
        padding: 10px 14px;
        border-radius: 6px;
        background: #409eff;
        color: #fff;
        text-decoration: none;
        border: none;
      }
      .btn:disabled {
        opacity: 0.6;
      }
      .row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
      }
      .kv {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .kv span {
        background: #f5f7fa;
        padding: 6px 8px;
        border-radius: 4px;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="title">📍 手机定位测试</div>
      <div class="meta">本页将获取您的手机当前位置，与师训地点及电子围栏半径进行距离测试，仅用于测试展示。</div>
      <div class="row">
        <button id="btn" class="btn">开始定位测试</button>
      </div>
      <div id="info" class="kv" style="margin-top:10px"></div>
      <div id="res" class="result" style="display:none"></div>
    </div>

    <script>
      /**
       * 北京时间：2025-11-13
       * 读取查询参数
       */
      function getQuery() {
        const p = new URLSearchParams(location.search)
        return {
          lng: Number(p.get('lng')),
          lat: Number(p.get('lat')),
          radius: Number(p.get('radius')) || 0,
          title: p.get('title') || '师训地点'
        }
      }

      /**
       * 北京时间：2025-11-13
       * Haversine 距离（米）
       */
      function haversineDistance(lat1, lng1, lat2, lng2) {
        const toRad = v => (v * Math.PI) / 180
        const R = 6378137
        const dLat = toRad(lat2 - lat1)
        const dLng = toRad(lng2 - lng1)
        const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
        return Math.round(R * c)
      }

      /**
       * 北京时间：2025-11-13
       * 更新信息展示
       */
      function setInfo(q, phone) {
        const info = document.getElementById('info')
        info.innerHTML = ''
        const add = (k, v) => {
          const s = document.createElement('span')
          s.textContent = k + ': ' + v
          info.appendChild(s)
        }
        add('师训', q.title)
        add('中心经纬度', q.lng + ', ' + q.lat)
        add('围栏半径(米)', q.radius)
        if (phone) add('手机经纬度', phone.lng + ', ' + phone.lat)
      }

      /**
       * 北京时间：2025-11-13
       * 展示测试结果
       */
      function showResult(dist, radius) {
        const el = document.getElementById('res')
        el.style.display = 'block'
        const ok = dist <= radius
        el.className = 'result ' + (ok ? 'ok' : 'warn')
        el.textContent = '当前位置距离师训地点约 ' + dist + ' 米，电子围栏 ' + radius + ' 米，测试结果：' + (ok ? '在范围内 ✅' : '超出范围 ❌')
      }

      /**
       * 北京时间：2025-11-13
       * 执行定位测试
       */
      function runTest() {
        const q = getQuery()
        setInfo(q)
        if (!q.lng || !q.lat) {
          alert('缺少师训坐标参数')
          return
        }
        if (location.protocol !== 'https:') {
          const httpsUrl = 'https://' + location.host + location.pathname + location.search
          alert('为保证定位权限，请使用 HTTPS 访问：' + httpsUrl)
          return
        }
        const btn = document.getElementById('btn')
        btn.disabled = true
        if (!navigator.geolocation) {
          alert('当前浏览器不支持定位')
          btn.disabled = false
          return
        }
        navigator.geolocation.getCurrentPosition(
          function(pos) {
            const phone = { lat: pos.coords.latitude, lng: pos.coords.longitude }
            setInfo(q, phone)
            const dist = haversineDistance(phone.lat, phone.lng, q.lat, q.lng)
            showResult(dist, q.radius)
            btn.disabled = false
          },
          function(err) {
            alert('定位失败：' + (err && err.message ? err.message : '未知错误'))
            btn.disabled = false
          },
          { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
        )
      }

      document.getElementById('btn').addEventListener('click', runTest)
    </script>
  </body>
</html>
